<template>
  <n-card
    class="card-wrapper"
    hoverable
  >
    <div class="title">交流反馈</div>
    <div class="content">欢迎加 <n-gradient-text type="info">微信</n-gradient-text> 交流反馈，一起学习，共同进步。
      <br />微信号： <n-gradient-text type="error">wxid_ol00i2ptdy0q22</n-gradient-text>
      <n-popover
        trigger="hover"
        placement="right"
      >
        <template #trigger>
          <n-icon style="margin-left: 10px">
            <QrCode />
          </n-icon>
        </template>
        <div>
          <img
            :src="Author"
            style="width: 300px;"
          />
        </div>
      </n-popover>
      <br />公众号： <n-gradient-text type="error">温故知新之java</n-gradient-text>
      <n-popover
        trigger="hover"
        placement="right"
      >
        <template #trigger>
          <n-icon style="margin-left: 10px">
            <QrCode />
          </n-icon>
        </template>
        <div>
          <img
            :src="wenguzhixin"
            style="width: 300px;"
          />
        </div>
      </n-popover>
    </div>
    <br />
    <br />
    <div class="title">作者</div>
    <div class="content">
      现任知名互联网公司担任全栈高级开发工程师，一直致力于对 Ancient Web 系列框架的研发、迭代和推广。
    </div>
    <br />
    <br />
    <Donation />
  </n-card>
</template>

<script setup lang="ts">
import { NCard, NGradientText, NAlert, NIcon, NPopover } from 'naive-ui'
import { QrCode } from '@vicons/ionicons5'
import QQImage from '../assets/qq_group.jpg'
import wechat from '../assets/wechat.png'
import wenguzhixin from '../assets/wenguzhixin.jpg'
import Author from '../assets/author.png'
import ZhiMa from '../assets/zhimaqianduan.jpg'
import Donation from '../components/Donation.vue'
</script>

<style scoped lang="scss">
@media screen and (max-width: 960px) {
  .card-wrapper {
    width: 90% !important;
  }
}
.card-wrapper {
  width: 70%;
  margin: 40px auto;
  .title {
    font-weight: 500;
    font-size: 18px;
  }
  .content {
    margin-top: 20px;
    font-size: 14px;
    line-height: 25px;
  }
  .img-wrapper {
    & > img {
      width: 30%;
    }
  }
}
</style>
